<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>无人机动画测试</title>
    <style>
        :root{
            --lineWidth:.3rem;
            --totalTime:6s;
            --waitTime:1s
        }
        * {
            box-sizing: border-box;
        }

        .container {
            position: relative;
            width: 60rem;
            height: 30rem;
            border: .1rem solid gray;
            background: url("无人机背景.png") no-repeat;
        }

        .line {
            position: absolute;
            left: 10.4rem;
            top: 5.2rem;
            width: 20.2rem;
            height: 10.6rem;
            margin: 2rem;
            border: var(--lineWidth) dotted lightgreen;
            animation-name: colorChange;
            animation-duration: 5s;
            animation-delay: calc(var(--waitTime) + var(--totalTime)  );
        }

        .line > div:not(.plane) {
            position: absolute;
            background-color: red;
            animation-duration: 6s;
            animation-timing-function: ease-in-out;
            /*animation-iteration-count: 1;*/
            animation-delay: var(--waitTime);
        }

        .top, .bottom {
            height: var(--lineWidth);
        }

        .left, .right {
            width: var(--lineWidth);
        }

        .bottom {
            bottom:  calc(var(--lineWidth) * -1);
            animation-name: line_B;
        }

        .right {
            right: calc(var(--lineWidth) * -1);
            bottom: 0;
            animation-name: line_R;
        }
        .top{
            top: calc(var(--lineWidth) * -1);
            right: 0;
            animation-name: line_T;
        }
        .left{
            left: calc(var(--lineWidth) * -1);
            animation-name: line_L;
        }
        @keyframes line_B {
            0% {
                width: 0;
            }
            36%{
                width: 100%;
            }
            100%{
                width: 100%;
            }
        }
        @keyframes line_R {
            36% {
                height: 0;
            }
            56%{
                height: 100%;
            }
            100%{
                height: 100%;
            }
        }
        @keyframes line_T {
            56% {
                width: 0;
            }
            86%{
                width: 100%;
            }
            100%{
                width: 100%;
            }
        }
        @keyframes line_L {
            86% {
                height: 0;
            }
            100%{
                height: 100%;
            }
        }
        @keyframes colorChange {
            from {
                background-color: transparent;
            }
            3%{
                background-color: lime;
            }
            to{
                background-color: lime;
            }
        }

        .plane {
            position: absolute;
            top: calc(100% + 1rem);
            left: -1rem;
            transform: translate(0, -100%) rotate(90deg);
            width: 2rem;
            height: 2rem;
            border: .5rem dashed #ff0404;
            background-color: #00adef;
            background-origin: content-box;
            border-radius: 100% 100% 0 0;
            box-shadow: 0 0 0.8rem;
            animation-name: uavMove;
            animation-duration: 6s;
            animation-timing-function: ease-in-out;
            /*animation-iteration-count: infinite;*/
            animation-delay: var(--waitTime);

        }

        @keyframes uavMove {
            0% {
                top: calc(100% + 1em);
                left: -1em;
                transform: translate(0, -100%) rotate(90deg);
            }
            30% {
                transform: translate(-100%, -100%) rotate(90deg);
            }
            36% {
                top: calc(100% + 1em);
                left: calc(100% + 1em);
                transform: translate(-100%, -100%) rotate(0deg);
            }
            50% {
                transform: translate(-100%, 0) rotate(0deg);
            }
            56% {
                top: -1em;
                left: calc(100% + 1em);
                transform: translate(-100%, 0) rotate(-90deg);
            }
            80% {
                transform: translate(0, 0) rotate(-90deg);
            }
            86% {
                top: -1em;
                left: -1em;
                transform: translate(0, 0) rotate(-180deg);
            }
            100% {
                transform: translate(0, -100%) rotate(-180deg);
            }
            106% {
                top: calc(100% + 1em);
                left: -1em;
                transform: translate(0, -100%) rotate(-270deg);
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="line">
        <div class="top"></div>
        <div class="right"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="plane"></div>
    </div>



</div>
</body>
</html>